<template>
    <div>
        <el-dialog
        title="视频预览"
        :visible.sync="show"
        width="800px"
        :before-close="handleClose">
        <div class="ci" v-if="show">
            <video id="video1"  width="640" height="480" muted controls autoplay="autoplay" preload="auto" >
                <source :src="url" />
                您的浏览器不支持 HTML5 video 标签。
            </video>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">关 闭</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>

export default {
  props: {
    url:{
       type: String 
    },
    show:{
        type: Boolean,
        default: false
    }
  },
  data() {
    return {
    };
  },
  mounted() {
    // console.log('z2',this.url, this.show)
  },

  methods: {
    handleClose(){
        this.$emit('clear', false)
    }
  },
};
</script>
<style>
.ci{
  display: grid;
  place-items: center;
}
</style>
